import React, { Component } from 'react'
import echarts from '@/lib/echarts'
import { connect } from 'react-redux'
import { debounce } from '@/utils'

class BarChart extends Component {
    static defaultProps = {
        width: '100%',
        height: '350px',
        styles: {},
        className: ''
    }

    state = {
        chart: null
    }
    // dom挂载完就渲染echart 
    componentDidMount() {
        window.addEventListener('resize', () => {
            this.resize()
        })
        this.initChart()
    }
    componentWillReceiveProps(nextProps) {
        // 监听菜单变化
        if (nextProps.sidebarCollapsed !== this.props.sidebarCollapsed) {
            setTimeout(() => {
                this.resize()
            }, 300)
        }
        if (nextProps.chartData !== this.props.chartData) {
            this.initChart()
            debounce(this.initChart.bind(this), 300)()
        }
    }
    // 组件销毁时要做的事情
    componentWillUnmount() {
        if (!this.state.chart) {
            return
        }
        this.setState({ chart: null });
    }
    // 重置chart
    resize() {
        if (this.state.chart) {
            debounce(this.state.chart.resize.bind(this), 300)()
        }
    }
    // 初始化chart
    initChart() {
        if (!this.el) {
            return
        }
        this.setState({ chart: echarts.init(this.el, 'macarons') }, () => {
            this.setOptions(this.props.chartData)
        })
    }
    // 配置chart
    setOptions(data) {
        const { clean, guolv, fresh } = data;
        console.log(clean, guolv, fresh)
        this.state.chart.setOption({
            grid: {
                top: 10,
                left: '2%',
                right: '2%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow', // line | shadow
                }
            },
            xAxis: [
                {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    axisTick: {
                        alignWithLabel: true // 保证刻度线和标签对齐
                    },
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    axisTick: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '净化器',
                    type: 'bar',
                    stack: 'same',
                    barWidth: '66%',
                    data: clean,
                    animationDuration: 3000
                },
                {
                    name: '过滤器',
                    type: 'bar',
                    stack: 'same',
                    barWidth: '66%',
                    data: guolv,
                    animationDuration: 3000
                },
                {
                    name: '空气清新机',
                    type: 'bar',
                    stack: 'same',
                    barWidth: '66%',
                    data: fresh,
                    animationDuration: 3000
                },
            ]
            // tooltip: {
            //     trigger: "axis",
            //     axisPointer: {
            //       // 坐标轴指示器，坐标轴触发有效
            //       type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            //     },
            //   },
            //   grid: {
            //     top: 10,
            //     left: "2%",
            //     right: "2%",
            //     bottom: "3%",
            //     containLabel: true,
            //   },
            //   xAxis: [
            //     {
            //       type: "category",
            //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            //       axisTick: {
            //         alignWithLabel: true,
            //       },
            //     },
            //   ],
            //   yAxis: [
            //     {
            //       type: "value",
            //       axisTick: {
            //         show: false,
            //       },
            //     },
            //   ],
            //   series: [
            //     {
            //       name: "pageA",
            //       type: "bar",
            //       stack: "vistors",
            //       barWidth: "60%",
            //       data: [79, 52, 200, 334, 390, 330, 220],
            //     },
            //     {
            //       name: "pageB",
            //       type: "bar",
            //       stack: "vistors",
            //       barWidth: "60%",
            //       data: [80, 52, 200, 334, 390, 330, 220],
            //     },
            //     {
            //       name: "pageC",
            //       type: "bar",
            //       stack: "vistors",
            //       barWidth: "60%",
            //       data: [30, 52, 200, 334, 390, 330, 220],
            //     },
            //   ],
        })
    }
    //  render
    render() {
        const { width, height, styles, className } = this.props
        return (
            <div className={className}
                ref={el => (this.el = el)}
                style={{
                    ...styles,
                    width,
                    height
                }}
            ></div>
        )
    }
}
export default connect(state => state.app)(BarChart) 